<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item :options="options">
				<view class="house-item">
					<view class="swipe-action u-border-top">
						<view class="swipe-action__content">
							<view class="title">
								<view class="left">
									北京富力家园1单元101室
								</view>
								<view class="right">
									<view class="success">
										上门中
									</view>
									<!-- <view class="waiting">
										受理中
									</view> -->
									<!-- <view class="over">
										已完成
									</view> -->
									<!-- <view class="error">
										已取消
									</view> -->
								</view>
							</view>
							<view class="content">
								<view class="number">
									<text>保修项目</text>
									<text>水暖</text>
								</view>
								<view class="name">
									<text>预约时间</text>
									<text>2022/08/13</text>
								</view>
								<view class="name">
									<text>电话号码</text>
									<text>15298338038</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		name: "house-item",
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#CC655E'
					}
				}]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.house-item {
		width: 100%;
		height: 311rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		// margin-bottom: 20rpx;

		.title {
			height: 96rpx;
			border-bottom: 1rpx solid #F2F2F6;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 30rpx;
				color: #333;
			}

			.right {
				.success {
					width: 128rpx;
					height: 48rpx;
					color: #27AE60;
					border-radius: 10rpx;
					background: #EBF8F0;
					font-size: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}

				.waiting {
					width: 104rpx;
					height: 48rpx;
					border-radius: 10rpx;
					background: #E5F0FB;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					color: #2D9CDB;
				}

				.over {
					width: 128rpx;
					height: 48rpx;
					color: #DEAB48;
					border-radius: 10rpx;
					background: #FCF5E9;
					font-size: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}

				.error {
					width: 128rpx;
					height: 48rpx;
					color: #979797;
					border-radius: 10rpx;
					background: #F2F2F6;
					font-size: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}
			}
		}

		.content {
			// height: 152rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			view {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				width: 100%;
				height: 42rpx;
				margin-bottom: 20rpx;

				text:nth-child(1) {
					color: #C3C3C5;
				}

				text:nth-child(2) {
					color: #686868;

				}
			}
		}
	}
</style>
